﻿/**
 * @fileoverview Giant Interective Group, Inc. Javascript Library v#version.
 * 该Javascript UI库是基于jQuery的扩展。
 * <pre>
 * Copyright (C) 2004-2009 Giant Interective Group, Inc. All rights reserved.
 * 版权所有 2004-2009 上海巨人网络科技有限公司
 * </pre>
 * @version #version, #date
 * @author  Zhangkai
 * Depend on jQuery 1.3.x
 */
if (typeof giant === 'undefined')
    var giant = window.giant = {};
if (typeof giant.ui === 'undefined')
    giant.ui = {};
(function($) {
    /**
     * 创建一个鼠标tip提示实例
     * @class giant.ui.mousetip 提示组件
     * @return {giant.ui.mousetip}的一个实例
     * @example
     * <pre>
     * var config = {
     *      width:300,
     *      showEvent:function(eventTarget, $tipCtn) {  //tip显示后的回调函数，有两个参数
     *          $tipCtn.html($(eventTarget).text());
     *      },
     *      showType:"fade"
     *  };
     *  var test = new giant.ui.mousetip(config);
     *  </pre>
     */	
    giant.ui.mousetip = function(options) {
        this.opts = $.extend({}, giant.ui.mousetip.defaults, options);
        this.id = giant.ui.mousetip.PREFIX + giant.ui.mousetip.AUTO_ID;
        giant.ui.mousetip.AUTO_ID++;
        this.loadTimeout = null;
        this.showTimeout = null;
        this.hideTimeout = null;
        this._init();
    };
    giant.ui.mousetip.PREFIX = 'ui-mousetip-';    //默认的tipId 前缀
    giant.ui.mousetip.AUTO_ID = 1000;           //tipId 生成页面唯一ID
    giant.ui.mousetip.prototype = {
        _init:function() {
            var $this = this;
            if ($("#" + $this.id).size() == 0) {
                $("body").append(this._getTemp());
                if ($this.opts.width != "auto") {
                    $("#" + $this.id).css("width", $this.opts.width + "px");
                } else {
                    $("#" + $this.id).css("width", $this.opts.width);
                }
            }
            $(this.opts.eventSource).bind("mouseover", function(event) {
                $this._getContent();
                var position = $this._calculatePosition(event);
                $("#" + $this.id).css({left:position.x + "px",top:position.y + "px"});
                $this.showTip(event);
            });
            if($this.opts.showPosition=="mouse"){
                $(this.opts.eventSource).bind("mousemove", function(event) {
                    if ($("#" + $this.id).css("display") == "block") {
                        var position = $this._calculatePosition(event);
                        $("#" + $this.id).css({left:position.x + "px",top:position.y + "px"});
                        $this.showTip(event);
                    }
                });
            }

            $(this.opts.eventSource).bind("mouseout", function(event) {
                $this.hideTip(event);
            });
        },
        showTip:function(event) {
            var $this = this;
            if ($.isFunction($this.opts.showBeforeEvent)) {
                $this.opts.showBeforeEvent.call($this, event.target,$("#"+$this.id+" .ui-mousetip-inner"));
            }
            if (this.hideTimeout) {
                clearTimeout(this.hideTimeout);
                this.hideTimeou = null;
            }
            if ($this.opts.showType == "normal") {
                this.showTimeout = setTimeout(function() {
                    $("#" + $this.id).show();
                    if ($.isFunction($this.opts.showEvent)) {
                        $this.opts.showEvent.call($this, event.target, $("#" + $this.id + " .ui-mousetip-inner"));
                    }
                }, 200);
            }else{
                $("#" + $this.id).stop(true,true);
                $("#" + $this.id).animate({height: 'show',width:'show'},300,function(){
                    if ($.isFunction($this.opts.showEvent)) {
                        $this.opts.showEvent.call($this, event.target, $("#" + $this.id + " .ui-mousetip-inner"));
                    } 
                });
            }
        },
        hideTip:function(event) {
            var $this = this;
            if (this.showTimeout) {
                clearTimeout(this.showTimeout);
                $this.showTimeout = null;
            }
            if ($this.opts.showType == "normal") {
                this.hideTimeout = setTimeout(function() {
                    $("#" + $this.id).hide();
                    if ($.isFunction($this.opts.hideEvent)) {
                        $this.opts.hideEvent.call($this, event.target, $("#" + $this.id + " .ui-mousetip-inner"));
                    }
                }, 200);
            }else{
                $("#" + $this.id).stop(true,true);
                $("#" + $this.id).animate({height: 'hide',width:'hide'},300,function(){
                    if ($.isFunction($this.opts.hideEvent)) {
                        $this.opts.hideEvent.call($this, event.target, $("#" + $this.id + " .ui-mousetip-inner"));
                    }
                });
            }
        },
        _getTemp:function() {
            var arr = [];
            arr.push("<div class='buoy-right' id='");
            arr.push(this.id);
            arr.push("'>");
            arr.push("<div class='top clearfix'>");
            arr.push("<div class='ui-mousetip-inner'></div>");
            arr.push("<div class='dot'></div>");
            arr.push("</div><div class='bottom'></div></div>");
            return arr.join('');
        },
        _getContent:function() {
            var $this = this;
            $("#" + $this.id + " .ui-mousetip-inner").html($this.opts.content);
        },
        _calculatePosition:function(event) {
            var position = {x:0,y:0};
            // 判断小箭头在左边还是在右边，默认在右边。
            position.x = this.opts.showPosition!="dom"?event.pageX- this.opts.width-15:$(event.target).position().left- this.opts.width-5;
            position.y=this.opts.showPosition!="dom"? position.y = event.pageY - 10:$(event.target).position().top - 10;
             if(position.x<0){
                 position.x = this.opts.showPosition!="dom"?event.pageX+20:$(event.target).position().left+$(event.target).outerWidth()+10;
                 $("#" + this.id).removeClass("buoy-right").addClass("buoy-left");
             }
            return position;
        }
    };
     /**
     * @default
     * <pre> 
     * width==>tip宽度,设为auto则宽度自适应<br />
     * showPosition==>tip显示的位置。有两种，设为"dom"时为eventSource所在DOM元素附近，为"mouse"则tip跟随鼠标指针移动
     * showType==>tip显示的方式，若为"normal"则直接显示和隐藏，若为"fade"则以渐变的形式出现和隐藏
     * eventSource==>触发tip出现的元素
     * showBeforeEvent==>tip显示之前的回调函数，this指针指向当前giant.ui.mousetip对象
     *                   有两个参数，第一个为鼠标指针当前指向的dom元素，第二个为tip内容容器jquery对象。
     * showEvent==>tip显示后的回调函数， 参数同上
     * hideEvent==>tip隐藏后的回调函数，参数同上
     * </pre>
     */
    giant.ui.mousetip.defaults = {
        width:200,
        showPosition:"dom",
        showType:"normal",
        content:"数据加载中...",
        eventSource:".ui-mousetip-source",
        showBeforeEvent:null,
        showEvent:null,
        hideEvent:null
    };
})(jQuery);